<template>
  <view class="main dispaly flex-warp">
    <view class="img" v-for="(item, index) in imgUrlList" :key="item">
      <image class="cover" :src="item" mode="aspectFill"></image>
      <image class="up-bg" src="/static/icon/up.png" mode="aspectFill"></image>
      <view class="close" @click="deleteImage(index, item)">
        <image src="/static/icon/clo.png" mode="aspectFill"></image>
      </view>
    </view>
    <view class="up" v-if="imgUrlList.length < props.number">
      <image class="ad-bg" src="/static/icon/up.png" mode="aspectFill"></image>
      <view class="ad-box dispaly-align-center" @click="upload">
        <image class="ad" src="/static/icon/ad.png" mode="aspectFill"></image>
      </view>
    </view>
  </view>
<!--  <UploadImg :header="header"/>-->
</template>

<script setup>
// import UploadImg from '@/components/sunui-upimg/sunui-upimg.vue'
import {
  uploadImage
} from '@/utils/util.js'
import {
  ref, watch, reactive
} from 'vue';



const props = defineProps({
  number: {
    type: String || Number,
    default: 1
  },
  images: String
})

watch(
    () => props.images,
    (newVal) => {
      try {
        if(props.images)imgUrlList.value = props.images.split(',')
      } catch (e) {

      }
    }, {deep: true, immediate: true}
)


// 图片上传
let imgUrlList = ref([])

const emit = defineEmits(['upload'])
const upload = async () => {
  const res = await uploadImage(props.number, '', props.images ? props.images.split(',') : [])
  imgUrlList.value = res
  emit('upload', imgUrlList.value)
}

const deleteImage = async (index, item) => {
  imgUrlList.value.splice(index, 1)
  emit('upload', imgUrlList.value)
  const res = await uploadImage(props.number, item)

}
</script>

<style lang="scss" scoped>
.main {
  .up {
    margin: 8rpx;
    width: 144rpx;
    height: 144rpx;
    position: relative;

    .ad-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 144rpx;
      height: 144rpx;
    }

    .ad-box {
      width: 144rpx;
      height: 144rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      .ad {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }

  .img {
    position: relative;
    width: 144rpx;
    height: 144rpx;
    margin: 8rpx;

    .cover {
      width: 130rpx;
      height: 130rpx;
      position: absolute;
      top: 9rpx;
      left: 9rpx;
      right: 0;
    }

    .up-bg {
      width: 144rpx;
      height: 144rpx;
    }


    .close {
      position: absolute;
      top: 15rpx;
      right: 15rpx;

      image {
        width: 38rpx;
        height: 38rpx;
      }
    }
  }
}
</style>